<template>
  <div>
    <roofVue title="我的收藏"></roofVue>
    <div v-if="wish.length > 0">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div v-for="i in wish" :key="i.id">
          <van-card
            num="1"
            :price="i.product.shopPrice / 100"
            :title="i.product.name"
            :thumb="imgurl + i.product.defaultImg"
          >
            <template #tags>
              <van-tag plain type="danger" @click="product(i.productId)">商品</van-tag>
            </template>
            <template #footer>
              <van-button size="small" @click="remove(i.id)">删除</van-button>
            </template>
          </van-card>
        </div>
      </van-pull-refresh>
      <div v-if="aus">
        <van-divider v-show="isbools" @click="zaijia">点击加载</van-divider>
        <van-divider v-show="!isbools">正在加载中...</van-divider>
      </div>

      <van-divider v-else>已经到底了</van-divider>
    </div>
    <van-empty
      v-else
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="描述文字"
    />
  </div>
</template>

<script>
import roofVue from "../other/roof.vue";
export default {
  data() {
    return {
      index: 8,
      num: 1,
      wish: [],
      isLoading: false,
      total: 0,
      isbools: true,
      aus: true,
    };
  },
  methods: {
    async getshow(isno) {
      let res = await this.$post(this.url + "user/wishlist", {
        userId: this.$store.state.user.id,
        pageSize: this.index,
        currentPage: this.num,
      });
      // console.log(res);
      if (res.errorCode == "0") {
        // 总页数
        this.total = res.data.totalPage;
        if (isno) {
          this.wish.push(...res.data.wishlist);
        } else {
          this.wish = res.data.wishlist;
        }
      }
    },
    // 刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        // this.count++;
      }, 1000);
    },
    // 加载更多
    zaijia() {
      if (this.num == this.total) return;
      this.isbools = false;

      setTimeout(() => {
        this.num++;
        this.isbools = true;
        this.getshow(true);
      }, 2000);
      this.nums;
    },
    // 删除
    async remove(id) {
      let res = await this.$post(this.url + "user/remove/wishlist", {
        userId: this.$store.state.user.id,
        wishlisId: id,
      });
      if (res.errorCode == "0") {
        this.$notify({ type: "danger", message: "删除成功" });
        this.getshow();
      }
    },
    // 跳转
    product(id) {
      this.Sto.Session.set("productId", id);
      this.$router.push("/product");
    },
  },
  components: {
    roofVue,
  },
  created() {
    this.getshow();
  },
  watch: {
    num() {
      if (this.num == this.total) return (this.aus = false);
    },
  },
};

</script>

<style  scoped>
</style>